<template>
    <div class="container" id="sun-moon" :class="isDay ? 'light' : 'dark'">
        <div class="bg"></div>
        <div class="moon-box">
            <div class="moon"></div>
        </div>
        <div class="sun-box">
            <div class="sun"></div>
        </div>
        <div class="sea"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isDay: true,
        };
    },
    mounted() {
    },
    methods: {
        toggleDayNight() {
            // 获取前端容器元素
            const container = document.getElementById("sun-moon");
            // 设置z-index值
            container.style.zIndex = "9999"; // 请替换成您希望设置的z-index值
            this.isDay = !this.isDay;
            setTimeout(() => {
                container.style.zIndex = "-1"; // 请替换成您希望设置的z-index值
            }, 1500);
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/day-night-toggle.scss";
</style>
